<template>
	<view style="background-color: #f1f1f1;height: 100vh;">
		<view class="top">
			<text style="padding-left: 15rpx;">安全申报单</text>
		</view>
		<view class="two">
			<view class="two-one">
				<view class="two-oneLeft">申报地点 :</view>
				<view class="two-oneRight">{{dataList.ADDRESS}}</view>
			</view>
			<view class="two-one">
				<view class="two-oneLeft">联系人 :</view>
				<view class="two-oneRight">{{dataList.PROPOSER}}</view>
			</view>
			<view class="two-one">
				<view class="two-oneLeft">
					<!-- <u-icon style="margin-left: -300rpx;" name="phone" color="#2979ff" size="28"></u-icon> -->
					电话 :</view>
				<!-- <view class="two-oneRight">{{dataList.PROPHONE}}</view>				 -->
				<view class="two-oneRight">
					<span style="border-bottom: 1px solid blue;color: blue;"
						@click="callPhone(dataList.PROPHONE)">{{dataList.PROPHONE}}
					</span>
				</view>
			</view>
			<view class="two-one">
				<view class="two-oneLeft">隐患描述 :</view>
				<view class="two-oneRight">{{dataList.REPCONT}}</view>
			</view>
		</view>
		<view class="there">
			<text style="padding-left: 15rpx;">申报情况</text>
		</view>
		<view class="four">
			<view class="four-one">
				<view class="four-oneLeft">处理人 :</view>
				<view class="four-oneRight">{{dataList.SERPSON}}</view>
			</view>
			<view class="four-one">
				<view class="four-oneLeft">派单人 :</view>
				<view class="four-oneRight">{{dataList.SERPSON!="" && dataList.YPDUSR=="" ? '抢单' : dataList.YPDUSR}}</view>
			</view>
		</view>
		<view class="five">
			<text style="padding-left: 15rpx;">申报方式</text>
		</view>
		<view class="sixBox">
			<text>隐患照片 ：</text>
			<u-album :urls="urls"></u-album>
		</view>
		<view class="four-item" v-if="showbtn==true">
			<u-button class="rgzxBox-btn2" type="primary" color="orangered"
			@click="myZp">分配</u-button>
		</view>
	</view>
</template>

<script>
	import * as dd from 'dingtalk-jsapi'
	export default {
		data() {
			return {
				dataList:{},
				num:'',
				urls:[],
				userInfo: {},
				mediaIds: [],
				userInfo2: {},
				ddconfig:{
					nonceStr:'SAGEX3',
					timeStamp:0,
				},
				showbtn:false,
			}
		},
		onLoad(query) {
			// console.log(query,'未派单');
			// 从 query 中获取传递过来的数据，并将其转换为对象
			// this.dataList = JSON.parse(query.wpdData);
			this.num = query.num || 'YD2KX24080001';
			// console.log(this.dataList,'未派单获取的数据');
			// this.wData = this.dataList.GRP1
			// console.log(this.wData,'最终数据');
			this.userInfo = uni.getStorageSync('userInfo')
			this.getUserInfo()
			// this.init()
			// this.initdd()
		},
		onShow(query) {
			this.dataList={}
			this.init()
		},
		methods: {
			callPhone(phoneNumber){
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: (res) => {
					  console.log('拨打电话成功');
					  if(this.userInfo.ID=='1'){
						alert('拨打电话成功')
					  }
					},
					fail(err) {
					  console.log('拨打电话失败'+err);
					  if(this.userInfo.ID=='1'){
						alert('拨打电话失败'+err)
					  }
					}
				});
			},
			initdd(){
				// alert(location.href)
				this.ddconfig.timeStamp=new Date().getTime()
				uni.request({
				  url: 'http://125.64.76.148:8125/KXJDDDApi/ddconfig?code=1'
				  +'&nonceStr='+this.ddconfig.nonceStr
				  +'&timeStamp='+this.ddconfig.timeStamp
				  +'&url=http://125.64.76.148:8125/repair/', // 替换为实际的接口URL
				  method: 'GET',
				  data: {},
				  success: (res) => {
					  console.log(res)
					  // uni.$u.toast('initdd.success:'+JSON.stringify(res))
					  // alert('success:'+JSON.stringify(res))
					  dd.config({
					      agentId: '2833818530', // 必填，微应用ID
					      corpId: 'ding81f5b58b1546a0fd35c2f4657eb6378f',//必填，企业ID
					      timeStamp: this.ddconfig.timeStamp, // 必填，生成签名的时间戳
					      nonceStr: this.ddconfig.nonceStr, // 必填，自定义固定字符串。
					      signature: res.data.sign, // 必填，签名
					      type:0/1,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
					      jsApiList : [
					          'device.audio.startRecord',
					          'device.audio.stopRecord',
					          'device.audio.play',
							  'device.audio.download',
					      ] // 必填，需要使用的jsapi列表，注意：不要带dd。
					  });

					  dd.error(function (err) {
					      uni.$u.toast('钉钉初始化错误，录音功能无法使用: ' + JSON.stringify(err));
					  })//该方法必须带上，用来捕获鉴权出现的异常信息，否则不方便排查出现的问题
				  },
				  fail(err) {
					  alert('fail:'+err)
				  	console.log(err)
				  }
				})
			},
			async init(){
				// const rs = await this.getUserInfo()
				// console.log('执行完成',rs);
				let GRP1 = {
						GRP1: [{
							YDRNUM: this.num
						}]
				}
				let res = await this.$api.x3.x3request("WSLISTXDR2",GRP1)

					// 请求成功的处理逻辑
					let resR1 = JSON.parse(res.message)
					this.dataList= resR1.GRP1[0]
					console.log(this.dataList,'新报修数据');
					this.oneLength= resR1.GRP1.length
					var files = resR1.GRP3
					for (var i = 0; i < files.length; i++) {
						this.urls.push(files[i].URL)
					}
					var medias = resR1.GRP4
					for (var i = 0; i < medias.length; i++) {
						this.mediaIds.push(medias[i].MID)
					}
					if(this.dataList.DSTAT=='1'){
						this.showbtn=true
					}
					if(this.dataList.DSTAT>'1'){
						this.showbtn=false
					}
			},
			async getUserInfo(){
			  // return new Promise((resolve,reject) => {
				let GRP1 = {
						GRP1: [{
							// ID:"1",
							PHONE: this.userInfo.PHONE,
					}]
				}
				let res = await this.$api.x3.x3request("WSLISTYDUR",GRP1)

					let cxsbData = JSON.parse(res.message)
					this.userInfo2.Y2 = cxsbData.GRP1[0].Y2
					this.userInfo2.Y4 = cxsbData.GRP1[0].Y4
					if(this.userInfo2.Y4=='2' && this.dataList.DSTAT=='1'){
						this.showbtn=true
					}
			},
			mySl(){
				// 使用 uni.navigateTo 跳转到 my 页面，并传递数据
				uni.navigateTo({url:"/pages/slqrPages/slqrPages?wData="+JSON.stringify(this.dataList)})
				// uni.navigateTo({url:"/pages/slqrPages/slqrPages"})
			},
			myZp(){
				uni.navigateTo({url:"/pages/yhxzPages/yhxzPages?myzpData="+JSON.stringify(this.dataList)})
			},
		}
	}
</script>

<style>
.top{
	height: 100rpx;
	line-height: 100rpx;
	color: #13d5f6;
}
.two{
	/* height: 365rpx; */
	background-color: white;
}
.two-one{
	/* height: 60rpx; */
	display: flex;
	justify-content: space-between;
}
.two-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: right;
}
.two-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: left;
}
.there{
	height: 100rpx;
	line-height: 100rpx;
	color: #13d5f6;
}
.four{
	height: 120rpx;
	background-color: white;
}
.four-one{
	height: 60rpx;
	display: flex;
	justify-content: space-between;
}
.four-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: right;
}
.four-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: left;
}
.five{
	height: 100rpx;
	line-height: 100rpx;
	color: #13d5f6;
}
.sixBox{
	/* height: 250rpx; */
	background-color: white;
	line-height: 57rpx;
	padding-left: 40rpx;
	margin-bottom: 30rpx;
}
.four-item{
	width: 90%;
	margin-top: 16rpx;
	margin-left: 40rpx;
}
.lyOkBox{
	display: flex;
}
</style>
